<template>
  <div>
    <div class="page" v-show="show">
      <div class="pageList">
        <span :class="Last ? 'disabled' : 'btn'" @click="last">上一页</span>
        <span class="btn" v-show="currentPage > 5" @click="jump(1)">1</span>
        <span class="btn" v-show="efont">...</span>
        <span
          :class="currentPage == item ? 'bgc' : 'btn'"
          v-for="(item, i) in indexs"
          :key="i"
          @click="jump(item)"
          >{{ item }}</span
        >
        <span class="btn" v-show="ebehind">...</span>

        <span :class="Next ? 'disabled' : 'btn'" @click="next">下一页</span>
        <span
          class="btn"
          v-show="currentPage < total - 4"
          @click="jump(total)"
          >{{ total }}</span
        >

        <span class="btn">跳转到：</span>
        <span class="btn">
          <input type="text" v-model="changePage" />
        </span>
        <span class="btn" @click="jump(changePage)">GO</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //当前页
      total: 50, //总页数
      changePage: "", //跳转页
      nowIndex: 0,
    };
  },
  computed: {
    show() {
      return this.total && this.total != 1;
    },
    Last() {
      return this.currentPage == 1;
    },
    Next() {
      return this.currentPage == this.total;
    },
    efont() {
      if (this.total <= 7) {
        return false;
      }
      return this.currentPage > 5;
    },
    ebehind() {
      if (this.total <= 7) {
        return false;
      }
      var arr = this.indexs;
      return arr[arr.length - 1] != this.total;
    },
    indexs() {
      var left = 1;
      var right = this.total;
      var Arr = [];
      if (this.total >= 7) {
        if (this.currentPage > 5 && this.currentPage < this.total - 4) {
          left = Number(this.currentPage) - 3;
          right = Number(this.currentPage) + 3;
        } else {
          if (this.currentPage <= 5) {
            left = 1;
            right = 7;
          } else {
            right = this.total;
            left = this.total - 6;
          }
        }
      }
      while (left <= right) {
        Arr.push(left);
        left++;
      }
      return Arr;
    },
  },
  methods: {
    last() {
      this.currentPage--;
    },
    next() {
      this.currentPage++;
    },
    jump(id) {
      this.currentPage = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  font-weight: 900;
  height: 40px;
  text-align: center;
  color: #888;
  margin: 20px auto 0;
  background: #f2f2f2;
  span {
    font-size: 14px;
  }
  input {
    width: 55px;
    height: 26px;
    font-size: 13px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
  }
  .btn {
    border: 1px solid #ccc;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
  }
  .disabled {
    pointer-events: none;
    background: #ddd;
  }
  .bgc {
    border: 1px solid #ccc;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
    cursor: default;
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
  }
}
</style>